<div class="container">
	<h1 class="page_head">Add User</h1>

	<form method="post" action="<?php echo URL; ?>user/create" onsubmit="return validate(this);">
		<fieldset>
			<legend>
				New User
			</legend>
			<table>
				<tbody>
					<tr>
						<td><label>User Name:</label></td>
						<td>
						<input type="text" name="userName" required autocomplete="off" pattern="[A-Za-z0-9]{3,16}"/>
						</td>
						<td><strong class="form_info">3-16 Characters (Letters and numbers only)</strong></td>
					</tr>
					<tr>
						<td><label>Password:</label></td>
						<td>
						<input type="password" name="password" required pattern="[A-Za-z0-9]{6,16}"/>
						</td>
						<td><strong class="form_info">6-16 Characters (Letters and numbers only)</strong></td>
					</tr>

					<tr>
						<td><label>Confirm Password:</label></td>
						<td>
						<input type="password" name="confirm-password" required pattern="[A-Za-z0-9]{6,16}"/>
						</td>
					</tr>

					<tr>
						<td><label>First Name:</label></td>
						<td>
						<input type="text" name="firstName" required pattern="[A-Za-z]{2,22}"/>
						</td>
						<td><strong class="form_info">max 22 Characters (Letters only)</strong></td>
					</tr>

					<tr>
						<td><label>Last Name:</label></td>
						<td>
						<input type="test" name="lastName" required pattern="[A-Za-z]{2,22}"/>
						</td>
						<td><strong class="form_info">max 22 Characters (Letters only)</strong></td>
					</tr>

					<tr>
						<td><label>E-mail:</label></td>
						<td>
						<input type="email" name="email" required/>
						</td>
					</tr>

				</tbody>
			</table>

			<button type="submit">
				Sign-up
			</button>
		</fieldset>
	</form>
</div>

<script>
	function validate(form) {
		var e = form.elements;

		/* Your validation code. */

		if (e['password'].value != e['confirm-password'].value) {
			alert('Your passwords do not match. Please type more carefully.');
			return false;
		}
		return true;
	}
</script>

